import { getProListFn, getBannerListFn } from "./api/home";
import { useEffect } from "react";

import { changeProList, changeBannerList } from './store/modules/home'
import { useDispatch, useSelector } from 'react-redux'

export default function Home() {


    // 获取修改方法 dispatch
    const dispatch = useDispatch()

    // 获取全局状态中的 proList
    const proList = useSelector(state => state.home.proList)


    // 获取轮播图数据
    const bannerList = useSelector(state => state.home.bannerList)


    // useEffect 会在挂载阶段，更新阶段，卸载阶段执行
    useEffect(() => {

        getProListFn().then(res => {
            // console.log(res.data.data);
            // 将数据放在全局状态中
            // 修改数据
            dispatch(changeProList(res.data.data))
        })

        // 发送数据请求
        getBannerListFn().then(res => {
            // console.log(res.data.data);
            dispatch(changeBannerList(res.data.data))
        })


    }, [])

    return <>
        <ul>
            {proList && proList.map(item => {
                return <li key={item.proid}>{item.proname}</li>
            })}
        </ul>

        <ol>
            {bannerList && bannerList.map(item => {
                return <li key={item.bannerid}>
                    <img src={item.img} style={{ width: 200 }} alt="" />
                </li>
            })}
        </ol>
    </>
}